<template>
    <AdminSkeleton>
        <template #header>
            <div class="params">
                <el-form :model="statusform" label-width="auto">                    
                    <el-form-item label="会话状态:" size="small">
                        <el-config-provider>
                            <el-select v-model="statusform.isActive" 
                                clearable
                                placeholder="请选择" size="small" style="width: 100px"                      
                            >
                                <el-option v-for="item in statusOptions" :label="item.label" :value="item.value" :key="item.value" />
                            </el-select>
                        </el-config-provider>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="getUserSessions(statusform)"
                        :loading = "loading">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </template>
        <template #control>
            <div class="conturol-box">
                <el-button type="warning" size="small" title="批量处理" @click="batchEdit">
                    <el-icon><Checked /></el-icon>
                </el-button>
                <el-button type="danger" size="small" title="批量清理会话" v-show="selectShow" @click="editSubmit('batchDel',selectSessions)">
                    <el-icon><DeleteFilled /></el-icon>
                </el-button>
            </div>
        </template>
        <template #content>
            <el-table :data="userSessionsTable" style="width: 100%"  v-loading="loading" 
                @selection-change="handleSelectionChange"
                id="usersTable"
            >
                <el-table-column type="selection" width="50" v-if="selectShow" :selectable="selectable"/>
                <el-table-column fixed prop="SESSION_ID" label="SESSION_ID" width="220" />
                <el-table-column prop="USER_ID" label="人员号" width="100" />
                <el-table-column prop="TOKEN_HASH" label="加密token值" width="120" />
                <el-table-column prop="CLIENT_IP" label="客户端IP" width="120" />
                <el-table-column prop="LOGIN_TIME" label="登录时间" width="120" >
                    <template #default="{row}">
                        {{ dateFormatTimeStamp(row.LOGIN_TIME) }}
                    </template>
                </el-table-column>
                <el-table-column prop="LAST_ACTIVITY" label="最后活跃时间" width="120">
                    <template #default="{row}">
                        {{ dateFormatTimeStamp(row.LAST_ACTIVITY) }}
                    </template>
                </el-table-column>
                <el-table-column prop="EXPIRY_TIME" label="token失效时间" width="120" >
                    <template #default="{row}">
                        {{ dateFormatTimeStamp(row.EXPIRY_TIME) }}
                    </template>
                </el-table-column>
                <el-table-column prop="IS_ACTIVE" label="是否有效" width="120" />
                <el-table-column fixed="right" label="Operations" min-width="120">
                    <template #default="{row}">
                        <el-button  type="danger" size="small" class="del" title="清理" @click="editSubmit('delete',row)"
                            :disabled="useStore.userInfo.PERSONID === row.USER_ID"
                        >
                            <el-icon><DeleteFilled /></el-icon>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </AdminSkeleton>
</template>

<script setup>
import { reactive, ref } from 'vue'
import AdminSkeleton from '@/components/AdminSkeleton.vue' 
import {getUserSessionsInfo , editUserSessions , batchEditUserSessions} from '@/utils/adminApi/sessions.js'
import { msgOpen } from '@/utils/msg'
import {dateFormatTimeStamp} from '@/utils/dateFormat'
import {confirm as conturolConfrim , confirmBatch} from '@/utils/confirm'
import {mainStore} from '@/stores/store'

let useStore = mainStore()

let statusform = reactive({
    isActive: 1
})
let statusOptions = [
    { label: '有效', value: 1 },
    { label: '失效', value: 0 }
]

let loading = ref(false)
let userSessionsTable = ref([])
let selectShow = ref(false) //展示批量勾选状态
let selectSessions = ref([]) //批量处理选中的会话

let submitType = ref("")

//获取用户会话信息
const getUserSessions = async (form) => {
    loading.value = true
    let userSessions = await getUserSessionsInfo(form)
    userSessionsTable.value = userSessions.resDatas.userSessions
    loading.value = false
    msgOpen(userSessions.msg,"success")
}

//批量处理
const batchEdit = ()=>{   
    if(userSessionsTable.value.length) selectShow.value = !selectShow.value
}

//会话表格选择框
const handleSelectionChange = (val)=>{
    selectSessions.value = val 
}

/**
 * 禁止选择自身
 * @param {*} row 
 */
const selectable = (row) => ![useStore.userInfo.PERSONID].includes(row.USER_ID)

/**
 * 会话处理
 * @param {*} type 类型 delete 清理/ baytchDel批量清理
 * @param {*} row 表单行对象
 */
const editSubmit = async (type,row)=>{
    submitType.value = type
    let res 
    if(type === "delete") res = await conturolConfrim(row.SESSION_ID)
    if(type === "batchDel") res = await confirmBatch(row.length)
    if(res){
        let killSession = type == "delete" ? await editUserSessions(row) : await batchEditUserSessions(row)
        if(killSession.status){
            msgOpen(killSession.msg,"success")
            getUserSessions(statusform)
        }
    }
    /*if(type == "delete"){
        console.log(row)   
        let res = await confirm(row.SESSION_ID)
       if(res){
            let killSession = await editUserSessions(row)  
            if(killSession.status){
                msgOpen(killSession.msg,"success")
                getUserSessions(statusform) 
            }  
        }        
    }
    if(type == "batchDel"){
        // console.log(row)
        let res = await confirmBatch(row.length)
        if(res){
            let killSessions = await batchEditUserSessions(row) 
            msgOpen(killSessions.msg,"success")
            getUserSessions(statusform)             
        }        
    }*/
}

</script>

<style lang="less" scoped>
.params{
    width: 100%;
    height: 100%;
    .el-form{
        width: 100%;
        height: 100%;
        display: flex;
        align-items:center;
        justify-content: flex-start;
        .el-form-item{
            margin-bottom: 0;
            margin-right: .3125rem;
        }
    }
    
}

.el-table{
    height: 95%;
}
</style>